<template>
  <div>
    <a-empty v-if="sortListWrap.length <= 0" />
    <div v-else>
      <template v-for="(item, index) in sortListWrap" :key="index">
        <div class="items" v-if="item && item.list && item.list.length > 0">
          <div class="title-item">
            {{ item.name }}
          </div>
          <div v-if="item.name == '实验室检查'">
            <!-- <div v-for="(item4, index4) in item.list" :key="index4">
            <a-table
              :columns="columns"
              :dataSource="item4.content"
              size="small"
              class="table"
              :pagination="false"
            >
              <template #bodyCell="{ column, record }">
                <template v-if="column.dataIndex == 'resultFlag'">
                  <span
                    :class="[
                      'tips',
                      record.resultFlag == 1 ? 'active' : record.resultFlag == 0 ? 'on' : ''
                    ]"
                    >{{ record.resultFlag ? '↑' : '-' }}</span
                  >
                </template>
              </template>
            </a-table>
          </div> -->
            <a-table
              :columns="columns"
              :dataSource="item.list"
              size="small"
              class="table"
              :pagination="false"
            >
              <template #bodyCell="{ column, record }">
                <template v-if="column.dataIndex == 'resultFlag'">
                  <span
                    :class="[
                      'tips',
                      record.resultFlag == 1 ? 'active' : record.resultFlag == 0 ? 'on' : ''
                    ]"
                    >{{ record.resultFlag ? '↑' : '-' }}</span
                  >
                </template>
              </template>
            </a-table>
          </div>
          <template v-else>
            <div v-for="(item2, index2) in item.list" :key="index2">
              <div class="checkTitle">{{ item2.itemGroupName }}</div>
              <div class="checkWrap">
                <template v-if="item2.content && item2.content.length > 0">
                  <p
                    style="white-space: pre-wrap"
                    v-for="(item3, index3) in item2.content"
                    :key="index3"
                  >
                    {{ item3.itemName }}：{{ item3.itemResult }}
                  </p>
                </template>
                <p v-else style="white-space: pre-wrap">暂无数据</p>
              </div>
            </div>
          </template>
        </div>
      </template>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, watch, nextTick } from 'vue'
const sortListWrap = ref<any>([])
const patInfos = ref<any>({})
const props = defineProps({
  sortList: {
    type: Object, // 或者 Object, 取决于你需要的类型
    required: true
  },
  patInfo: {
    type: Object, // 或者 Object, 取决于你需要的类型
    required: true
  }
})
watch(
  () => props,
  (newValue, oldValue) => {
    nextTick(() => {
      patInfos.value = newValue.patInfo
      sortListWrap.value = newValue.sortList
    })
  },
  {
    immediate: true,
    deep: true
  }
)
const columns = ref<any[]>([
  {
    title: '项目组合名称',
    dataIndex: 'itemGroupName',
    key: 'itemGroupName',
    align: 'left'
  },
  {
    title: '项目名称',
    dataIndex: 'itemName',
    key: 'itemName',
    align: 'left'
  },
  {
    title: '结果',
    dataIndex: 'itemResult',
    key: 'itemResult',
    align: 'left'
  },
  {
    title: '提示',
    dataIndex: 'resultFlag',
    key: 'resultFlag',
    align: 'left'
  },
  {
    title: '单位',
    dataIndex: 'itemResultUnit',
    key: 'itemResultUnit',
    align: 'left'
  },
  {
    title: '参考范围',
    dataIndex: 'reference',
    key: 'reference',
    align: 'left'
  }
])
</script>
<style lang="less" scoped>
.items {
  margin-top: 24px;

  &:nth-child(1) {
    margin-top: 0;
  }
}

.title-item {
  padding: 8px 16px;
  margin-top: 24px;
  font-size: 16px;
  font-weight: 600;
  color: #165dff;
  background: #e8f3ff;
}

.title-item:first-child {
  margin-top: 0;
}

.checkTitle {
  margin: 12px 0;
  font-size: 16px;
  font-weight: 700;
}

::v-deep(.table) {
  margin-top: 12px;

  .tips {
    display: inline-block;

    &.on {
      color: #f53f3f;
      transform: rotate(180deg);
    }

    &.active {
      color: #f53f3f;
    }
  }
}

.checkWrap {
  padding: 12px;
  background: #f7f8fa;

  p {
    margin: 0;
    font-size: 14px;
    color: #1d2129;
  }
}

.surgeryList {
  .item {
    display: flex;
    margin-top: 12px;

    &:nth-child(1) {
      margin-top: 0;
    }

    p {
      width: 100px;
      margin: 0;
      font-size: 14px;
      color: #86909c;

      &:nth-child(2) {
        flex: 1;
        width: auto;
        color: #1d2129;
      }
    }
  }
}

.result-content {
  padding: 12px;
  background: #f7f8fa;
}
</style>
